<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt"  prefix="fmt" %>

<!DOCTYPE html>
<html>
<head>
	<title>小程序端信息管理</title>

	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<!-- 引入bootstrap -->
	<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/bootstrap.min.css">

	<!-- 引入JQuery  bootstrap.js-->
	<script src="<%=request.getContextPath()%>/js/jquery-3.2.1.min.js"></script>
	<script src="<%=request.getContextPath()%>/js/bootstrap.min.js"></script>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

	<style>
		label {
			display: block;
			width: 70px;
			height: 28px;
			background: green;/*没用*/
		}
		.mui-switch + .mui-switch-text {
			width: 100%;
			height: 100%;
			border: 1px solid blue;
			background-color: #fff;
			display: flex;
			align-items: center;
			position: relative;
		}
		.mui-switch-text:before {
			content: 'OFF';
			width: 50%;
			height: 100%;
			top: 0;
			left: 0;
			position: absolute;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff; /*字体颜色*/
			transition: left 0.2s;
			background-color: blue; /*按钮背景*/
		}
		.mui-switch:checked + .mui-switch-text:before {
			content: 'ON';
			left: 50%;
		}
		.mui-switch + .mui-switch-text span {
			display: inline-block;
			width: 50%;
			text-align: center;
			color: #fff;
		}
		.appletstable{
			border:1px solid;
			table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
			width:100%;
			word-break:keep-all;/* 不换行 */
			white-space:nowrap;/* 不换行 */
			overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
			text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
		}
		.wrap{
			width:80%;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			text-align: center;
		}
		td{border:solid 1px}
	</style>
</head>
<body>
<!-- 顶栏 -->
<jsp:include page="top.jsp"></jsp:include>
<!-- 中间主体 -->
<div class="container" id="content">
	<div class="row">
		<jsp:include page="menu.jsp"></jsp:include>
		<div class="col-md-10">
			<div class="panel panel-default">
				<div class="panel-heading">
					<div class="row">
						<h1 class="col-md-5"> 前台基础信息 </h1>
						<button class="btn btn-default col-md-2" style="margin-top: 20px" onClick="location.href='<%=request.getContextPath()%>/admin/Applets/editSceneryApplets'">
							编辑前台信息
						</button>
					</div>
				</div>
				<table class="appletstable" style="text-align: center" id="commentTab">
					<tr>
						<td width="180px" height="40px" >学校名称（版权）：</td>
						<td>${applets.copyright}</td>
					</tr>
					<tr>
						<td width="180px" height="40px" >学校简称：</td>
						<td>${applets.shortname}</td>
					</tr>
					<tr>
						<td width="180px" height="40px" >学校地址：</td>
						<td>${applets.floor}</td>
					</tr>
                    <tr>
                        <td width="180px" height="40px">评论功能：</td>
                        <td height="40px" id="myComment">
                            ${applets.mycomment}
                        </td>
                    </tr>
					<tr>
						<td width="180px" height="40px" >简介：</td>
						<td class="wrap"><div class="wrap" style="text-align: center" title="${applets.description}"> ${applets.description} </div></td>
					</tr>
					<tr>
						<td width="180px" height="40px" >校训：</td>
						<td>${applets.xiaoxun}</td>
					</tr>
					<tr>
						<td width="180px" height="40px" >经度：</td>
						<td>${applets.longitude}</td>
					</tr>
					<tr>
						<td width="180px" height="40px" >纬度：</td>
						<td>${applets.latitude}</td>
					</tr>
					<tr>
						<td width="180px" height="60px">背景：</td>
						<td><img width="50px" height="60px" id="images" alt="背景" src="/image/${applets.background}"></td>
					</tr>
					<tr>
						<td width="180px" height="60px">视频：</td>
						<td>
							<video controls>
								<source src="/image/${applets.videosrc}" type="video/mp4">
							</video>
							暂无视频
						</td>
					</tr>
				</table>
				<div class="panel-footer" style="text-align: center;">===============================================</div>
			</div>
		</div>
	</div>
</div>
<div class="container" id="footer">
	<div class="row">
		<div class="col-md-12"></div>
	</div>
</div>
</body>
<script type="text/javascript">
	//1
	$("#nav li:nth-child(5)").addClass("active");

	//2 改变关的值
	//通过id获取表格中的值 判断为空能够赋新值
    var arr=[];
    $("table tr").each(function () {
        var res =$(this).find('td').eq('1').text();
        arr.push(res);
    })
    var txt=arr[2];
    if(txt.replace(/(^\s*)|(\s*$)/g,"")=="" || txt.replace(/(^\s*)|(\s*$)/g,"")==undefined){
        document.getElementById("myComment").innerHTML="关";
    }

</script>
</html>